import './index.css'
import {data_42906, data_42093} from './data';
import {useSetState} from 'ahooks';
import zhCN from 'antd/locale/zh_CN';
import {data as datalist} from '../data';
import {LeftCircleOutlined} from '@ant-design/icons';
import {ConfigProvider, Table, Layout, Image} from 'antd';

const Index_ = props => {
    const {history, match: {params}} = props;
    console.log(params.id);
    const [state, setState] = useSetState({
      loading: false,
      dataSource: (params.id === '42096' ? data_42906 : 
                   params.id === '42093' ? data_42093 : []).map((item, index) => ({
        id: 'key' + index,
        ...item,
      })),
      filterText: '',
    });
    const {loading, dataSource, filterText} = state;
    const getColumns = () => {
      return [
        {
          title: '图片',
          dataIndex: 'b0',
          width: 150,
          render: value => <Image src={value} width={30}/>
        },
        {
          title: '零件型号-乐高',
          dataIndex: 'b1',
          width: 160,
        },
        {
          title: '数量',
          dataIndex: 'b2',
          width: 180,
        },
        {
          title: '颜色',
          dataIndex: 'b3',
          width: 180,
        },
        {
          title: '描述',
          dataIndex: 'b4',
          width: 180,
        },
      ];
    };
    return (
      <ConfigProvider
          locale={zhCN}
        >
        <Layout.Header className='page-head'>
          <LeftCircleOutlined style={{width: 50, fontSize: 20, cursor: 'pointer'}} onClick={() => {
            history.push({pathname: `/list`});
          }} />
          <div className='page-head-title'>
            {params?.id}零件列表
          </div>
          <Image src={datalist?.filter(obj => obj.id === params?.id)?.[0].b0} width={50}/>
        </Layout.Header>
        <Layout.Content style={{
            margin: '0px 16px',
            padding: '20px',
          }}>
          <Table
            columns={getColumns()}
            bordered
            dataSource={dataSource}
            loading={loading}
            rowKey="id"
          />
        </Layout.Content>
      </ConfigProvider>
    );
  };

export default Index_;